<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2020-12-04 14:46:08
 * @LastEditors: Seven
 * @LastEditTime: 2020-12-27 17:02:02
-->
<template>
    <div class="containers-warp">
        <div class="play-bar">
            <div class="containers">
                <div class="paly-title">
                    <div class="name">{{courseInfo.title}}</div>
                </div>
                <div class="play-wrap">
                    <div class="video-wrap">
                        <client-only>
                            <ali-player v-if="isPlay" style="height:100%" :options="options" :vid="vid" ref="player"></ali-player>
                            <div v-else class="no-purchase">
                                <span>立即报名</span>
                            </div>
                        </client-only>
                    </div>
                    <div class="play-info">
                        <div class="teacher-info">
                            <div class="avatar-wrap">
                                <el-avatar
                                    :size="46"
                                    src="/images/example/avatar.jpg"
                                ></el-avatar>
                                <div class="s">讲师</div>
                            </div>
                            <div class="right">
                                <div class="name">黄老师</div>
                                <div class="info">心理咨询师培训·9年教龄</div>
                            </div>
                        </div>
                        <div class="catalog-wrap" :class="!isBuy ? 'no-Buy': '' ">
                            <div class="title">目录</div>
                            <div class="catalog-list">
                                <div
                                    class="item"
                                    :class="index === active ? 'active' :''"
                                    v-for="(item, index) in catalogList"
                                    :key="index"
                                    @click="selectCatalog(index)"
                                >
                                     <i class="iconfont iconicon_huabanfuben" v-if="!item.isFree"></i><span>{{ item.title }}</span> 
                                </div>
                            </div>
                            <div class="bottom">
                                <button class="btn" @click="purchase(courseInfo.id)">立即报名</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="containers">
            <div class="course-body">
                <el-row :gutter="20">
                    <el-col :xs="24" :sm="15" :md="17">
                        <!-- 课程详情 -->
                        <bar id="details" title="课程详情">
                            <div class="detlis" v-exchangeHtml:foo="courseInfo.content">
                            </div>
                        </bar>
                    </el-col>
                    <el-col :xs="24" :sm="9" :md="7">
                        <!-- 相关课程 -->
                        <relevant-course
                            class="relevant-course"
                            :data="recommendList"
                        ></relevant-course>
                    </el-col>
                </el-row>
            </div>
        </div>
        <log-in :visible.sync="is_pop"></log-in>
    </div>
</template>
<script>
import { getRelevantCourse,getPlayAuth,createOrder } from "~/api";
const TYPE = 1; // 订单类型--1.课程 2.题库
export default {
    data() {
        return {
            // 登录组件显示隐藏
            is_pop:false,
            // 课程信息
            courseInfo:'',
            playauth: '',
            // 目录
            catalogList: [
            ],
            active:0,
            // 为你推荐,相关课程
            recommendList: [
            ],
            // 播放器设置
            options: {
                // source:'//player.alicdn.com/video/aliyunmedia.mp4',
                isLive: !true,   //切换为直播流的时候必填
                useFlashPrism: false,    //指定为flash
                disableSeek: true //禁用进度条的Seek，默认值为false
            },
        };
    },
    async asyncData({params,app}) {

        // 课程id
        const COURSE_ID = params.id
        
        // 获取课程基本信息
        let getCourseInfo = app.$axios
            .$get(`/edu/course/info/${COURSE_ID}`,{
                params:{
                    source:1
                }
            })
            .then((res) => {
                if(res.code ===0){
                    return res.data;
                }
            });
        // 好课推荐
        let getRecommendList = app.$axios
            .$get(`/edu/course/courseRecommend`)
            .then((res) => {
                if (res.code === 0) {
                    return res.data;
                }
            });
        // 获取课程目录
        let catalogList = await app.$axios
            .$get(`/edu/course/courseDirList/${COURSE_ID}`)
            .then((res) => {
                if(res.code ===0){
                    return res.data;
                }
            });
        // 获取视频凭证
        let playauth = await app.$axios
            .$post(`/pc/course/getPlayAuth/${catalogList[0].id}`)
            .then((res) => {
                if(res.code ===0){
                    return res.data;
                }
            });
        
        let courseInfo = await getCourseInfo;
        let recommendList = await getRecommendList;
        return {
            courseInfo,
            catalogList,
            playauth,
            recommendList
        };
    },
    computed:{
        // 视频vid
        vid(){
            return this.catalogList[this.active].videoSourceId
        },
        // 视频id
        videoID(){
            return this.catalogList[this.active].id
        },
        // 是否购买了课程
        isBuy(){
            return this.courseInfo.isBuy
        },
        // 当前目录是否可以播放
        isPlay(){
            return this.isBuy || this.catalogList[this.active].isFree
        },
        // 用户信息
        user(){
            return this.$store.state.user
        },
        // 是否登录
        isLogin(){
            return this.$store.state.isLogin
        }
    },
    mounted(){
        this.$axios
            .$get(`/edu/course/info/5`,{
                params:{
                    source:1
                }
            })
            .then((res) => {
                if(res.code ===0){
                    console.log(res)
                }
            });
    },
    methods:{
        // 切换目录
        selectCatalog(index){
            this.active = index;
            if(this.isPlay){
                this._getPlayAuth(this.videoID).then(()=>{
                    const player = this.$refs.player;
                    player && player.reloadPlayer(this.vid,this.playauth)
                })
            }
        },
        // 获取视频凭证
        _getPlayAuth(id){
            return getPlayAuth(id).then(res=>{
                if(res.data.code ===0){
                    return this.playauth = res.data.data
                }
            })
        },
        // 购买课程
        purchase(id){
            if(this.isLogin){
                createOrder(this.user.phone,this.user.nickName,id,TYPE).then(res=>{
                    if(res.data.code === 0){
                        this.$router.push('/payment/'+res.data.data)
                    }else{
                        this.$message.error(res.data.msg);
                    }
                })
            }else{
                // 如果没有登录，去登录
                this.is_pop = true
            }
        },
    }
};
</script>
<style lang="scss" scoped>
.play-bar {
    background-color: #191919;
    padding-bottom: 40px;
}
.paly-title {
    padding: 20px 0;
    .name {
        font-size: 22px;
        color: #fff;
    }
}
.play-wrap {
    display: flex;
    .video-wrap {
        width: 860px;
        height: 570px;
        position: relative;
        .video {
            width: 100%;
            height: 100%;
            background: #000;
            outline: none;
        }
        .no-purchase{
            width: 100%;
            height: 100%;
            background: #000;
            color: #fff;
            font-size: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .play-info {
        flex: 1;
        .teacher-info {
            width: 100%;
            padding: 0 24px;
            height: 94px;
            background-color: #333333;
            display: flex;
            align-items: center;
            .avatar-wrap {
                flex: 0 0 46px;
                width: 46px;
                height: 46px;
                border-radius: 100%;
                overflow: hidden;
                position: relative;
                .s {
                    color: #fff;
                    font-size: 12px;
                    background: rgba(0, 0, 0, 0.3);
                    width: 100%;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    z-index: 10;
                    text-align: center;
                    padding: 3px 0;
                }
            }
            .right {
                padding-left: 14px;
                .name {
                    font-size: 16px;
                    color: #fff;
                }
                .info {
                    font-size: 14px;
                    color: #999999;
                    margin-top: 6px;
                    @include line-over;
                }
            }
        }
    }
}
.catalog-wrap {
    position: relative;
    .title {
        background-color: #2d2d2d;
        border-bottom: 1px #26262b solid;
        font-size: 16px;
        color: #fff;
        height: 42px;
        line-height: 42px;
        padding-left: 40px;
        position: relative;
        &::before {
            content: "";
            display: block;
            width: 2px;
            height: 16px;
            background: #12bd96;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 24px;
        }
    }
    .catalog-list {
        background-color: #2d2d2d;
        overflow-x: hidden;
        overflow-y: auto;
        height: 433px;
        position: relative;
        z-index: 5;
        &::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }
        &::-webkit-scrollbar-track-piece {
            background-color: #333333;
            border-radius: 6px;
        }
        &::-webkit-scrollbar-thumb:vertical {
            height: 4px;
            background-color: #999;
            border-radius: 6px;
        }
        &::-webkit-scrollbar-thumb:horizontal {
            width: 4px;
            background-color: #333;
        }
        .item {
            height: 44px;
            line-height: 44px;
            color: #999999;
            padding-left: 47px;
            position: relative;
            i{
                vertical-align: middle;
                margin-right: 5px;
            }
            span{
                vertical-align: middle;
            }
            @include line-over(1);
            &:hover,
            &.active {
                background-color: #1e1e1e;
                cursor: pointer;
                &::before {
                    border-color: #fff;
                }
            }
            &::before {
                content: "";
                display: block;
                width: 11px;
                height: 11px;
                background: #2d2d2d;
                border: 1px solid #999999;
                border-radius: 50%;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 20px;
                z-index: 20;
            }
            &::after {
                content: "";
                display: block;
                width: 1px;
                height: 100%;
                background: #999999;
                position: absolute;
                top: 0;
                left: 25px;
                z-index: 10;
            }
            &:first-of-type {
                &::after {
                    height: 50%;
                    top: 50%;
                }
            }
            &:last-of-type {
                &::after {
                    height: 50%;
                }
            }
        }
    }
    .bottom {
        width: 100%;
        height: 62px;
        background: #333333;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 20px;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 10;
        display: none;
        .btn {
            width: 100%;
            height: 42px;
            line-height: 42px;
            background: linear-gradient(90deg, #04cead 0%, #80d9d0 100%);
        }
    }
    &.no-Buy{
        .bottom{
            display: flex;
        }
        .catalog-list{
            padding-bottom: 62px;
        }
    }
}
.course-body{
    margin-bottom: 40px;
}
.course-body,
.recommendList {
    margin-top: 34px;
}
.detlis{
    line-height: 1.5;
}
@media screen and (max-width: 760px) {
    .play-bar{
        .containers{
            padding: 0;
        }
    }
    .play-wrap {
        display: block;
        .video-wrap {
            width: 100%;
            height: 56vw;
        }
        .play-info {
            flex: 1;
            .teacher-info {
                width: 100%;
                padding: 0 24px;
                height: 70px;
                background-color: #333333;
                display: flex;
                align-items: center;
            }
        }
    }
}
</style>